<template>
  <view class="add-modal">
    <view class="add-modal-mask" @click="$emit('close')" />
    <view class="add-modal-content">
      <view class="add-modal-header">
        <text>{{ title }}</text>
        <button class="close-btn" @click="$emit('close')">关闭</button>
      </view>
      <view class="add-modal-form">
        <view class="add-modal-form-item">
          <text>标题：</text>
          <input type="text" v-model="title" />
        </view>
        <view class="add-modal-form-item">
          <text>信息：</text>
          <textarea v-model="content" />
        </view>
        <button class="add-modal-submit" @click="add">添加</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '添加'
    }
  },
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    add() {
      const time = new Date().toLocaleString()
      const data = {
        title: this.title,
        content: this.content,
        time: time
      }
      this.$emit('add', data)
      this.$emit('close')
      this.title = ''
      this.content = ''
    }
  }
}
</script>